<template>
  <div class="editAccount">
    <div class="help_right">
      <el-row :gutter="20">
        <el-col :span="4" style="position: sticky; top: 0;"><el-menu default-active="2" class="el-menu-vertical-demo">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-edit-outline"></i>
                <span>新手上路</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1"><a href="#1.1">在线注册</a></el-menu-item>
                <el-menu-item index="1-2"><a href="#1.2">购买保险</a></el-menu-item>
                <el-menu-item index="1-3"><a href="#1.3">线上发票</a></el-menu-item>
                <el-menu-item index="1-4"><a href="#1.4">管理中心</a></el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-bank-card"></i>
                <span>支付方式</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1"><a href="#2.1">移动端在线支付</a></el-menu-item>
                <el-menu-item index="2-2"><a href="#2.2">PC端在线支付</a></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu></el-col>
        <el-col :span="20">
          <div class="headline">
            <h3 id="1.1">新手上路</h3>
          </div>

          <h4 id="">1、在线注册</h4>
          <p>一、在首页点击“注册”按钮</p>
          <el-image style="width: 1000px; margin-top: 10px;" title="点击可放大" :src="zc" :preview-src-list="srcList"></el-image>

          <p>二、注册完成后，点击【我的汇报】 => 【管理中心】 => 【账户维护】 填写账户信息 等待人工审核 审核通过后即可正常投保</p>
          <el-image style="width: 1000px; margin-top: 10px;" title="点击可放大" :src="zhwh" :preview-src-list="srcList"></el-image>

          <h4 id="1.2">2、购买保险</h4>
          <p>一、从首页选择对应的险种，填写号信息后，勾选同意免赔责任和投保声明，最后点击立即投保</p>
          <el-image style="width: 1000px; margin-top: 10px;" title="点击可放大" :src="tb" :preview-src-list="srcList"></el-image>

          <p>
            二、移动端购买保险：把鼠标放在【手机汇保】上会出现一个二维码，手机直接扫描二维码（或微信公众号搜索“深汇保”），进入微信公众号，关注一下公众号，点击投保进入登录页，登录后进入首页，选择对应限制，进行投保
          </p>
          <el-image style="width: 200px; margin-top: 10px;" title="点击可放大" :src="sjtb" :preview-src-list="srcList"></el-image>
          <h4 id="1.3">3、线上发票</h4>
          <p>一、申请发票：【发票管理】中点击【未申请保单发票】，点击【申请保单发票】开具电子发票。</p>
          <el-image style="width: 1000px; margin-top: 10px;" title="点击可放大" :src="wsqfp" :preview-src-list="srcList"></el-image>

          <h4 id="1.4">4、管理中心</h4>
          <p>一、修改密码，修改的是登录账户的密码</p>
          <el-image style="width: 1000px; margin-top: 10px;" title="点击可放大" :src="xgmm" :preview-src-list="srcList"></el-image>

          <p>二、账户变更，变更的是登录账户</p>
          <el-image style="width: 1000px; margin-top: 10px;" title="点击可放大" :src="zhbg" :preview-src-list="srcList"></el-image>

          <p>三、银行账户</p>
          <el-image style="width: 1000px; margin-top: 10px;" title="点击可放大" :src="yhzh" :preview-src-list="srcList"></el-image>
          <p>四、支付密码</p>
          <el-image style="width: 1000px; margin-top: 10px;" title="点击可放大" :src="zfmm" :preview-src-list="srcList"></el-image>

          <div class="headline">
            <h3>支付方式：有微信和支付宝两种支付方式，<span style="color:red;">不方便使用微信支付宝的客户，可以联系销售经理，进行月结投保，月底对账一起结算</span></h3>
          </div>
          <h4 id="2.1">1、移动端在线支付</h4>
          <p>移动端在线支付可以选择“微信支付”支付手段。</p>
          <div style="overflow:hidden">
            <el-image style="width: 200px; margin-top: 10px; float: left" title="点击可放大" :src="sjzf1" :preview-src-list="srcList"></el-image>
            <el-image style="width: 200px; margin-top: 10px; float: left" title="点击可放大" :src="sjzf2" :preview-src-list="srcList"></el-image>
            <el-image style="width: 200px; margin-top: 10px; float: left" title="点击可放大" :src="sjzf3" :preview-src-list="srcList"></el-image>
          </div>
          <h4 id="2.2">2、PC端在线支付</h4>
          <el-image style="width: 1000px; margin-top: 10px;" title="点击可放大" :src="ljcz" :preview-src-list="srcList"></el-image>
          <el-image style="width: 1000px; margin-top: 10px;" title="点击可放大" :src="qdzf" :preview-src-list="srcList"></el-image>
          <el-image style="width: 1000px; margin-top: 10px;" title="点击可放大" :src="wxzf" :preview-src-list="srcList"></el-image>
          <el-image style="width: 1000px; margin-top: 10px;" title="点击可放大" :src="zfbzf" :preview-src-list="srcList"></el-image>
        </el-col>
      </el-row>

    </div>

  </div>
</template>

<script>
import zc from "@/assets/jt/zc.jpg";
import zhwh from "@/assets/jt/zhwh.png";
import tb from "@/assets/jt/tb.png";
import sjtb from "@/assets/jt/sjtb.png";
import wsqfp from "@/assets/jt/wsqfp.png";
import xgmm from "@/assets/jt/xgmm.png";
import zhbg from "@/assets/jt/zhbg.png";
import yhzh from "@/assets/jt/yhzh.png";
import zfmm from "@/assets/jt/zfmm.png";
import ljcz from "@/assets/jt/ljcz.png";
import qdzf from "@/assets/jt/qdzf.png";
import wxzf from "@/assets/jt/wxzf.png";
import zfbzf from "@/assets/jt/zfbzf.png";
import sjzf1 from "@/assets/jt/sjzf1.png";
import sjzf2 from "@/assets/jt/sjzf2.png";
import sjzf3 from "@/assets/jt/sjzf3.png";
export default {
  data() {
    return {
      token: localStorage.getItem("token"),
      username: localStorage.getItem("username"),
      zc,
      zhwh,
      tb,
      sjtb,
      wsqfp,
      xgmm,
      zhbg,
      yhzh,
      zfmm,
      ljcz,
      qdzf,
      wxzf,
      zfbzf,
      sjzf1,
      sjzf2,
      sjzf3,
      srcList: [
        zc,
        zhwh,
        tb,
        sjtb,
        wsqfp,
        xgmm,
        zhbg,
        yhzh,
        zfmm,
        ljcz,
        qdzf,
        wxzf,
        zfbzf,
        sjzf1,
        sjzf2,
        sjzf3,
      ],
    };
  },
  methods: {
    goBack() {
      this.$router.push('/homePage')
    },
  },
  mounted() {},
};
</script>
<style scoped lang="less">
.help_right {
  margin-top: 30px;
}

.app-top {
  height: 80px;
  width: 100%;
  margin: auto;
}

.editAccount {
  /* background-color: #f5f5f5; */
  /* height: 100%; */
  width: 80%;
  margin: auto;
}

.dialog {
  /deep/.el-form-item {
    margin-bottom: 0px;
  }
}

a {
  color: #000;
  text-decoration: none;
}

.agreement-box {
  cursor: pointer;
  color: blue;
}
</style>
